.wrapper {
  position: relative;
  padding: var(--spacing-2);
  background-color: var(--color-gray-1000);
  border-radius: var(--border-radius-base);
}

.container {
  box-sizing: border-box;
  max-width: 100%;
  /* Add small padding to ensure full scroll */
  padding-bottom: 1px;
  overflow-x: auto;
  overflow-y: auto;
  font-family: var(--code-font);
  font-size: var(--font-size-2);
  color: var(--color-gray-100);
  /* Smoother expand/collapse animation */
  transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wrapper[data-expanded='true'] .container {
  max-height: 600px;
}

.wrapper[data-expanded='false'] .container {
  max-height: 100px;
}

/* Gradient overlays */
.gradientTop,
.gradientBottom {
  position: absolute;
  right: 0;
  left: 0;
  z-index: 10;
  height: 30px;
  pointer-events: none;
}

.gradientTop {
  top: 0;
  background: linear-gradient(
    180deg,
    var(--color-gray-1000) 0%,
    var(--color-gray-1000-alpha-90, rgba(16, 19, 21, 0.9)) 30%,
    var(--color-gray-1000-alpha-60, rgba(16, 19, 21, 0.6)) 60%,
    transparent 100%
  );
}

.gradientBottom {
  bottom: 0;
  background: linear-gradient(
    0deg,
    var(--color-gray-1000) 0%,
    var(--color-gray-1000-alpha-90, rgba(16, 19, 21, 0.9)) 30%,
    var(--color-gray-1000-alpha-60, rgba(16, 19, 21, 0.6)) 60%,
    transparent 100%
  );
}

/* Custom scrollbar */
.container::-webkit-scrollbar {
  width: 6px;
}

.container::-webkit-scrollbar-track {
  background: var(--color-gray-1000);
  border-radius: 3px;
}

.container::-webkit-scrollbar-thumb {
  background: var(--color-gray-500);
  border-radius: 3px;
}

.container::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-300);
}
